<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="header">{{ title ? title : 'Hello Vue3' }}</div>
  <div v-show="alertMsg">
    <el-alert title="Alert" type="warning" :description="alertMsg"></el-alert>
  </div>
</template>

<script lang="ts" setup>
defineProps({
  title: String,
})
import emitter from '@/utils/emitter';
import { ref } from 'vue';

const alertMsg = ref<string>('')

emitter.on('mitt-global-alert', (data) => {
  console.log(data)
  alertMsg.value = data as string
  console.log(alertMsg.value)
})

</script>
<style scoped>
.header {
  width: 100%;
  height: 100%;
  /* padding: 1.8rem; */
  margin: 0 0 20px 0;
  background-color: #42b883;
  color: white;

  text-align: center;
  border-bottom: 1px solid #35495e;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 3rem;
  font-weight: bold;
  top: 0;
  z-index: 1000;
}
</style>
